<template>
  <mu-form-item
    class="registerForm"
    :key="item.prop"
    :prop="item.prop"
    :label="item.label"
    :label-float="
      item.type !== 'radio' &&
      item.type !== 'time-picker' &&
      item.type !== 'data-picker'
    "
  >
    <mu-text-field
      v-if="
        item.type === 'text' || item.type === 'tel' || item.type === 'number'
      "
      :type="item.type"
      v-model="validateForm[item.prop]"
    ></mu-text-field>
    <mu-text-field
      v-if="item.type === 'multi-line'"
      v-model="validateForm[item.prop]"
      multi-line
      :rows="item.row"
      :max-length="item.maxLength"
    ></mu-text-field>
    <mu-text-field
      v-else-if="item.type === 'password'"
      v-model="validateForm[item.prop]"
      :action-icon="visibility ? 'visibility_off' : 'visibility'"
      :action-click="() => (visibility = !visibility)"
      :type="visibility ? 'text' : 'password'"
    ></mu-text-field>
    <mu-radio
      v-else-if="item.type === 'radio'"
      v-for="option in item.options"
      :key="option.value"
      v-model="validateForm[item.prop]"
      :value="option.value"
      :label="option.label"
    ></mu-radio>
    <mu-select
      v-else-if="item.type === 'option'"
      v-model="validateForm[item.prop]"
    >
      <mu-option
        v-for="option in item.options"
        :key="option.value"
        :value="option.value"
        :label="option.label"
      ></mu-option>
    </mu-select>
    <el-time-picker
      is-range
      v-else-if="item.type === 'time-picker'"
      v-model="validateForm[item.prop]"
      range-separator="~"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      placeholder="选择时间范围"
    >
    </el-time-picker>
    <el-date-picker
      v-else-if="item.type === 'data-picker'"
      v-model="validateForm[item.prop]"
      type="date"
      placeholder="选择日期"
    >
    </el-date-picker>
    <ClauseCheckbox
      v-else-if="item.type === 'checkbox'"
      :clause="item.clause"
    />
  </mu-form-item>
</template>

<script>
import ClauseCheckbox from "@/components/ClauseCheckbox/index.vue";
export default {
  props: {
    validateForm: Object,
    item: Object,
    clause: String,
  },
  components: {
    ClauseCheckbox,
  },
  data() {
    return {
      visibility: false,
    };
  },
};
</script>

<style scoped>
.registerForm {
  text-align: left;
}
</style>
